<template>
  <div class='my-swiper'>
    <!-- <img class="big-img" :src="defaultImg" alt=""> -->
    <div class="swiper-container" id="gallery">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in 5" :key="index"><img :src="defaultImg" alt=""></div>
      </div>
    </div>

    <div class="swiper-container" id="thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in 5" :key="index"><img :src="defaultImg" :class="{'bd-red':index==index0}" alt=""></div>
      </div>
    </div>
    
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      defaultImg:require('@/assets/imgs/productDetail/product.jpg'),
      index0:0,
    };   
  },
  methods: {
    init(){
      let that =this
      var thumbsSwiper = new Swiper('#thumbs',{
        spaceBetween: 10,
        slidesPerView: 4,
        watchSlidesVisibility: true,//防止不可点击
        on:{
          click: function(){
            that.$set(that,"index0",this.clickedIndex)
          },
        },
      })
      var gallerySwiper = new Swiper('#gallery',{
        thumbs: {
          swiper: thumbsSwiper,
        },
        on: {
          slideChangeTransitionEnd: function(){
            that.$set(that,"index0",this.activeIndex)
          },
        },
      })
    },

    setIndex(index){
      this.$set(this,"index0",index)
    }
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  }
};
</script>
<style lang="scss" scoped>
.my-swiper {
  width: 300px;
  
  #gallery{
    height: 300px;
    margin-bottom: 10px;
    img{
      height: 300px;
      padding: 15px;
      box-sizing: border-box;
      border: 1px solid #f2f2f2;
    }
  }
  .swiper-box{
    display: flex;

    .swiper-container{
      flex: 1;
      margin: 0 5px;
    }

    .pre,.next{
      box-sizing: border-box;
      border: 1px solid #f2f2f2;
      line-height: 58px;
      text-align: center;
    }
  }

  .swiper-slide{
    height: 60px;

    img{
      height: 100%;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #f2f2f2;
    }
    .bd-red{
      border-color: red;
    }
  }
}
</style>